<template>
  <div class="store-container">
    <h3 hidden>门店页面</h3>
    <com-search class="store-search"/>
    <!-- 关键标签水平滑动组件 -->
    <div class="store-content">
      <!-- slide -->
      <ul class="slide-box">
        <li
          v-for="(tag,index) in slideTags"
          :key="index"
          @click="selectTag(tag, index)"
          :class="['slide-item', index===activeTagIndex?'slide-item-active':'']">
          <van-tag round color="#f5f5f5">{{tag}}</van-tag>
        </li>
      </ul>
      <!-- store-box -->
      <ul class="store-box">
        <div
          v-for="(shopItem,index) in shopData"
          :key="index"
          class="shop-item">
          <router-link to="#">
            <com-list-item :itemData="shopItem" />
          </router-link>
          <div class="shopowner-box">
            <span class="shopowner-des">
              <van-icon :name="shopItem.shopowner.icon" size="48" class="shopowner-icon"/>
              <span>
                <p v-if="shopItem.shopowner.name">{{shopItem.shopowner.name}}</p>
                <p v-if="shopItem.shopowner.position">{{shopItem.shopowner.position}}</p>
              </span>
            </span>
            <van-button @click="onSubscribe(shopItem)" round size="small" class="shopowner-bnt">预约</van-button>
          </div>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
import comSearch from '../../components/comSearch'
import comListItem from '../../components/comListItem'

export default {
  name: "Store",
  props: {
    shopData: { // 店长店铺
      type: Array,
      default: () => [
        {
          id: 1000,
          link: '/hospital',
          image: require('../../assets/images/hospital-default.png'),
          name: '四川晶肤医学美容医院',
          tags: ['玻尿酸', '眼部整形', '抗衰老', '除皱瘦脸'],
          address: '四川市武侯区十二桥路39号',
          rate: 5,
          isAttestation: true,
          subscribe: 599,
          shopowner: {
            icon: require('../../assets/images/shopower-icon-default.png'),
            name: '杨莉',
            position: '店长'
          }
        },
        {
          id: 1001,
          link: '/hospital',
          image: require('../../assets/images/hospital-default.png'),
          name: '四川晶肤医学美容医院',
          tags: ['玻尿酸', '眼部整形', '抗衰老', '除皱瘦脸'],
          address: '四川市武侯区十二桥路39号',
          rate: 5,
          isAttestation: true,
          subscribe: 599,
          shopowner: {
            icon: require('../../assets/images/shopower-icon-default.png'),
            name: '杨莉',
            position: '店长'
          }
        },
        {
          id: 1000,
          link: '/hospital',
          image: require('../../assets/images/hospital-default.png'),
          name: '四川晶肤医学美容医院',
          tags: ['玻尿酸', '眼部整形', '抗衰老', '除皱瘦脸'],
          address: '四川市武侯区十二桥路39号',
          rate: 5,
          isAttestation: true,
          subscribe: 599,
          shopowner: {
            icon: require('../../assets/images/shopower-icon-default.png'),
            name: '杨莉',
            position: '店长'
          }
        },
        {
          id: 1002,
          link: '/hospital',
          image: require('../../assets/images/hospital-default.png'),
          name: '四川晶肤医学美容医院',
          tags: ['玻尿酸', '眼部整形', '抗衰老', '除皱瘦脸'],
          address: '四川市武侯区十二桥路39号',
          rate: 5,
          isAttestation: true,
          subscribe: 599,
          shopowner: {
            icon: require('../../assets/images/shopower-icon-default.png'),
            name: '杨莉',
            position: '店长'
          }
        },
        {
          id: 1003,
          link: '/hospital',
          image: require('../../assets/images/hospital-default.png'),
          name: '四川晶肤医学美容医院',
          tags: ['玻尿酸', '眼部整形', '抗衰老', '除皱瘦脸'],
          address: '四川市武侯区十二桥路39号',
          rate: 5,
          isAttestation: true,
          subscribe: 599,
          shopowner: {
            icon: require('../../assets/images/shopower-icon-default.png'),
            name: '杨莉',
            position: '店长'
          }
        }
      ]
    }
  },
  components: {
    comSearch,
    comListItem
  },
  data() {
    return {
      shopowner: '店长',
      activeTagIndex: 0,
      slideTags: [
        '玻尿酸', '自体脂肪', '肉毒素', '其他填充剂', '胸部轮廓'
      ]
    }
  },
  mounted() {},
  methods: {
    // 点击tag标签
    selectTag(item, index) {
      this.$toast(item)
      this.activeTagIndex = index
    },
    // 预约功能
    onSubscribe(item) {
      this.$toast('我想预约: ' + item.id)
    }
  }
}
</script>

<style lang="scss">
@import '../../assets/style/global.scss';

.store-container {
  margin-top: 20px;
  .store-search {
    /deep/.van-search__content {
      background-color: #e2e2e2 !important;
    }
  }
  .store-content {
    width: 100%;
    background-color: #ececec;
    border-radius: 16px;
    padding: 12px;
    .slide-box{
      width: 100%;
      margin: 2px 0 12px 0;
      display: -webkit-box;
      overflow-x: scroll;
      -webkit-overflow-scrolling:touch;
      .slide-item{
        height: 24px;
        line-height: 24px;
        margin-right: 12px;
        background: #fff;
        border-radius: 6px;
        span {
          color: #000;
          padding: 0 12px;
          background: none !important;
        }
      }
      .slide-item-active {
        span {
          color: #00e1f1;
        }
      }
    }
    .store-box {
      width: 100%;
      .shop-item {
        width: 100%;
        background: #fff;
        border-radius: 12px;
        margin-top: 12px;
        padding: 5px;
      }
      .shopowner-box {
        width: 100%;
        height: 72px;
        padding: 0 10px;
        @include center;
        justify-content: space-between !important;
        .shopowner-des {
          @include center;
          span {
            padding-left: 16px;
            @include ellipsis;
            p:first {
              font-size: 16px;
            }
            p:nth-child(2) {
              font-size: 14px;
              margin-top: 2px;
              color: #999;
            }
          }
        }
        .shopowner-bnt {
          @include btn;
          font-size: 14px;
        }
      }
    }
  }
  
}
</style>
